<template>
  <borderContainer
    bgColor="#fffbea"
    bdColor="#f6ce89"
    class="clock-content"
    :class="clockContentClass"
  >
    <!-- 无团 -->
    <view v-if="!hasGroup" class="clock-content-title"
      >发起组团，打卡可领取更多奖励哦~</view
    >
    <!-- 有团 -->
    <view v-else>
      <view v-if="fullGroup && !isInGroup" class="full-team-title"
        >团已满，发起组团，打卡可领取更多奖励哦~</view
      >
      <!-- 已成团/未满囤 -->
      <view class="has-team" v-if="!fullGroup && !activityOver"
        >还差<text>{{ formGrouptips.lack_num }}</text
        >人{{ formGrouptips.text }}</view
      >
      <view class="full-team" v-if="fullGroup && isInGroup">团已满</view>
      <!-- 活动已结束并且未成团 -->
      <view v-if="notFormGroup && activityOver" class="not-form-team"
        >很遗憾，该团未成团</view
      >
    </view>
    <!-- 组团打卡成员信息 -->
    <groupClockUser
      :hasGroup="hasGroup"
      :isRemoveStatus="isRemoveStatus"
      :groupUser="groupUser"
      :activity_data="activity_data"
      @remove="handleRemoveMember"
    ></groupClockUser>
    <!-- 组团内容按钮 -->
    <groupTeamButton
      v-if="!activityOver"
      :hasGroup="hasGroup"
      :fullGroup="fullGroup"
      :isInGroup="isInGroup"
      class="clock-content-button"
      @punch-operat="handlePunchOperate"
    ></groupTeamButton>
    <!-- 已邀请人数 -->
    <view class="invite_success_num" v-if="isShowInviteNum"
      >已邀请成功<text>{{ groupInfo.invite_success_num }}</text
      >人</view
    >
    <cloudTitle v-if="hasGroup" class="clock-content-tips" :width="516">
      <view class="group-name-wrap">
        <text class="group-name">{{ groupInfo.group_name }}</text>
        <!-- 去除编辑按钮 -->
        <!-- <text
          v-if="isShowEditBtn"
          class="group-edit"
          @tap="handleEditGroupName"
        ></text> -->
      </view>
    </cloudTitle>
  </borderContainer>
</template>
<script>
import borderContainer from "@/components/border-box/index";
import cloudTitle from "./components/cloud-container";
import groupTeamButton from "./components/group-team-button";
import groupClockUser from "./components/group-clock-user";
import {
  NORMAL,
  NOT_GROUP,
  DONE_GROUP,
  FULL_GROUP,
  OVER_ACTIVITY
} from "@/config/base-common";
/**未成团/已成团文案
 * @param {Boolean} isInGroup 是否在团中
 * @param {Boolean} status 是否成团
 */
function NotFormGroupFn(isInGroup, status) {
  const statusText = status ? "满" : "成";
  return isInGroup
    ? `${statusText}团，快去邀请好友吧！`
    : `${statusText}团，快来加入吧！`;
}
export default {
  props: {
    isRemoveStatus: { type: Boolean, required: true },
    /**团信息 */
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    /**活动信息 */
    activity_data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    /**是否组成团 */
    notFormGroup: {
      type: Boolean
    },
    isShowEditButton: {
      type: Boolean,
      default: true
    }
  },
  components: {
    cloudTitle,
    borderContainer,
    groupTeamButton,
    groupClockUser
  },
  data() {
    return {};
  },
  computed: {
    /**是否为无团情况 */
    hasGroup() {
      return !!this.groupInfo?.id;
    },
    /**团员信息 */
    groupUser() {
      return this.groupInfo?.user_data || [];
    },
    /**活动已结束 */
    activityOver() {
      return this.activity_data.activity_status === OVER_ACTIVITY;
    },
    /**是否在团中 */
    isInGroup() {
      return !!this.groupInfo.in_group;
    },
    /**满团 */
    fullGroup() {
      return this.groupInfo.status === FULL_GROUP;
    },
    /**已成团 */
    doneFormGroup() {
      return this.groupInfo.status === DONE_GROUP;
    },
    /**未成团/已成团提示信息 */
    formGrouptips() {
      /**已成团--取满团缺少人数 未成团--成团缺少人数 */
      const { lack_full_num, lack_success_num } = this.groupInfo;
      const lack_num = this.doneFormGroup ? lack_full_num : lack_success_num;
      return {
        lack_num,
        text: NotFormGroupFn(this.isInGroup, this.doneFormGroup)
      };
    },
    /**容器类名 */
    clockContentClass() {
      return {
        "not-has-group": !this.hasGroup,
        "over-activity": this.activityOver
      };
    },
    /**是否显示邀请数 */
    isShowInviteNum() {
      return (
        this.hasGroup && this.groupInfo.invite_success_num && this.isInGroup
      );
    },
    /**是否展示编辑按钮 */
    isShowEditBtn() {
      // 活动存在的前提下
      return (
        this.activity_data?.activity_status === NORMAL &&
        !!this.groupInfo?.is_leader &&
        this.isShowEditButton
      );
    }
  },
  methods: {
    handleEditGroupName() {
      console.log(this.groupInfo);
      this.$emit("edit");
    },
    handleRemoveMember(user) {
      this.$emit("remove", user);
    },
    /**打卡操作 */
    handlePunchOperate(type) {
      this.$emit("punch-operat", type);
    }
  }
};
</script>
<style lang="scss">
@import "./scss/group-common.scss";
.clock-content {
  position: relative;
  box-sizing: border-box;
  width: 694px;
  padding: 90px 34px 34px;
  margin-bottom: 68px;
  &-title,
  .full-team-title {
    text-align: center;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 48px;
    color: #303133;
    letter-spacing: 2px;
    margin-bottom: 64px;
  }
  .full-team-title {
    font-size: 28px;
    margin-bottom: 48px;
  }
  &-tips {
    top: -90px;
  }
  .content-slot {
    padding: 0;
  }
  .group-name-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    .group-edit {
      margin-left: 16px;
      width: 28px;
      height: 28px;
      background-size: 100% 100%;
      background-image: url("~@/assets/icon/group-edit.png");
    }
    .group-name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 335px;
    }
  }
  .full-team {
    letter-spacing: 2px;
    margin-bottom: 48px;
    text-align: center;
    @include base-text(40px, 28px, #ff4b10);
  }
  .not-form-team {
    letter-spacing: 2px;
    margin-bottom: 48px;
    text-align: center;
    @include base-text(40px, 28px, #303133, 400);
  }
  .has-team {
    letter-spacing: 2px;
    margin-bottom: 48px;
    text-align: center;
    @include base-text(40px, 28px, #303133, 400);
    text {
      @include base-text(40px, 28px, #ff4b10, 400);
    }
  }
  .invite_success_num {
    margin-top: 32px;
    padding-left: 18px;
    @include base-text(40px, 28px, #303133, 400);
    text {
      @include base-text(40px, 28px, #ff4b10, 400);
    }
  }
  &-button {
    margin-bottom: 16px;
  }
}
/**无团 */
.not-has-group {
  padding-top: 66px;
}
.over-activity {
  .clock-user-hasmumber {
    margin-bottom: 16px;
  }
}
/**多个按钮内部布局不同 */
// .double-button {
//   .clock-content-avatar {
//     padding-left: 14px;
//     padding-right: 14px;
//     &_noteam:not(:last-child) {
//       margin-right: 34px;
//       // &:last-child {
//       //   margin-right: 0;
//       // }
//     }
//   }
// }
</style>
